<script>
    import MapMain from "../libs/components/map/MapMain.svelte";
    import MapDetail from "../libs/components/map/MapDetail.svelte";
    import PlayerResourcePanel from "../libs/components/player/PlayerResourcePanel.svelte";
    import {onMount} from "svelte";
    import SaveManager from "../libs/scripts/save/SaveManager.js";
    import Toast from '../libs/components/base/Toast.svelte';
    import {mapEventBus} from "../libs/eventbus/map_signal.js";
    import BuildSide from "../libs/components/Side/Instance/BuildSide.svelte";
    import FullPathData from "../libs/eventbus/FullPathData.js";
    import FunctionSaveFactory from "../libs/scripts/save/FunctionSaveFactory.js";
    let point_position;
    let map_data;

    let hp = 75;
    let maxHp = 100;
    let mp = 50;
    let maxMp = 100;

    onMount(()=>{
        let saveManager = new SaveManager(window);
        saveManager.init(); // 尝试初始化资源
        FullPathData.window = window
        mapEventBus.emit('show-toast', {
            message: '保存成功！',
            type: 'success'
        });

    })

    function show_detail(data_package){
        // console.log("show detail",data_package.detail);
        point_position = data_package.detail
    }
</script>

<div class="main">
    <div class="player-resource-panel">
        <PlayerResourcePanel />
    </div>
    <MapMain on:map-click={show_detail}/>
    <MapDetail bind:point_position={point_position} bind:map_data={map_data}/>
    <Toast />
    <BuildSide />

</div>
<style lang="less">
  .player-resource-panel {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    min-width: 200px;
  }
  .main{
    position: relative;
  }
  .bars-container {
    max-width: 400px;
    padding: 20px;
    
    .bar-wrapper {
      margin-bottom: 10px;
      
      span {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
      }
    }
  }
</style>
